<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#007722',
                        secondary: '#009944',
                        neutral: '#f5f5f5',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(to right, #f5f5f5, #ffffff);
            }
            .shadow-login {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
            }
        }
    </style>
</head>
<body class="bg-gradient-primary min-h-screen flex items-center justify-center p-4">
<div class="login-container bg-white rounded-xl shadow-login w-full max-w-md p-6 sm:p-8">
    <div class="text-center mb-6">
        <h2 class="text-2xl font-bold text-primary mb-2">忘记密码</h2>
        <p class="text-gray-500 text-sm">请验证原密码后设置新密码</p>
    </div>

    <!-- 成功消息显示 -->
    <%
        String successMessage = (String) request.getAttribute("successMessage");
        if (successMessage != null) {
    %>
    <div class="alert alert-success mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
        <i class="fa fa-check-circle mr-2 text-green-500"></i>
        <span><%= successMessage %></span>
    </div>
    <div class="text-center mt-6">
        <a href="${pageContext.request.contextPath}/cjj/admin_login.jsp" class="inline-block bg-primary hover:bg-secondary text-white py-2 px-6 rounded-lg font-medium transition-all-300">
            返回登录页面
        </a>
    </div>
    <%
    } else {
    %>

    <!-- 错误消息显示 -->
    <%
        String errorMessage = (String) request.getAttribute("errorMessage");
        if (errorMessage != null) {
    %>
    <div class="alert alert-error mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
        <i class="fa fa-exclamation-circle mr-2 text-red-500"></i>
        <span><%= errorMessage %></span>
    </div>
    <%
        }
    %>

    <form action="${pageContext.request.contextPath}/admin/forgotPassword" method="post" class="space-y-4">
        <!-- 账号输入框 -->
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="fa fa-user text-gray-400"></i>
            </div>
            <input type="text" name="username" id="username" placeholder="管理员账号"
                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus"
                   required>
        </div>

        <!-- 原密码输入框 -->
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
            </div>
            <input type="password" name="oldPassword" id="oldPassword" placeholder="原密码"
                   class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus"
                   required>
            <button type="button" id="toggleOldPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-all-300">
                <i class="fa fa-eye-slash"></i>
            </button>
        </div>

        <!-- 新密码输入框 -->
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
            </div>
            <input type="password" name="newPassword" id="newPassword" placeholder="新密码"
                   class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus"
                   required>
            <button type="button" id="toggleNewPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-all-300">
                <i class="fa fa-eye-slash"></i>
            </button>
        </div>

        <!-- 确认新密码输入框 -->
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
            </div>
            <input type="password" name="confirmPassword" id="confirmPassword" placeholder="确认新密码"
                   class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus"
                   required>
            <button type="button" id="toggleConfirmPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-all-300">
                <i class="fa fa-eye-slash"></i>
            </button>
        </div>

        <!-- 密码强度提示 -->
        <div id="passwordStrength" class="hidden">
            <div class="flex items-center text-sm text-gray-600 mb-2">
                <i class="fa fa-info-circle text-primary mr-2"></i>
                <span>密码强度:</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div id="strengthBar" class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
            </div>
            <div id="strengthText" class="text-xs text-gray-500 mt-1"></div>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" id="resetPasswordBtn" class="w-full bg-primary hover:bg-secondary text-white py-3 px-4 rounded-lg font-medium transition-all-300 hover:shadow-lg hover:shadow-primary/20 flex items-center justify-center">
            <i class="fa fa-key mr-2"></i>
            <span>重置密码</span>
        </button>
    </form>

    <!-- 底部链接 - 返回登录页面 -->
    <div class="mt-6 text-center">
        <p class="text-sm text-gray-600">
            想起密码了?
            <a href="${pageContext.request.contextPath}/cjj/admin_login.jsp" class="text-primary hover:text-secondary transition-all-300 font-medium">返回登录</a>
        </p>
    </div>
    <% } %>
</div>

<script>
    // 账号输入验证
    const usernameInput = document.getElementById('username');
    const oldPasswordInput = document.getElementById('oldPassword');
    const resetPasswordBtn = document.getElementById('resetPasswordBtn');

    // 启用重置按钮的条件：账号和原密码都不为空
    function updateButtonState() {
        if (usernameInput.value.trim().length > 0 && oldPasswordInput.value.trim().length > 0) {
            resetPasswordBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            resetPasswordBtn.disabled = false;
        } else {
            resetPasswordBtn.classList.add('opacity-50', 'cursor-not-allowed');
            resetPasswordBtn.disabled = true;
        }
    }

    usernameInput.addEventListener('input', updateButtonState);
    oldPasswordInput.addEventListener('input', updateButtonState);

    // 密码显示/隐藏功能 - 原密码
    document.getElementById('toggleOldPassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('oldPassword');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 密码显示/隐藏功能 - 新密码
    document.getElementById('toggleNewPassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('newPassword');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 密码显示/隐藏功能 - 确认密码
    document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('confirmPassword');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 密码强度检测
    const newPasswordInput = document.getElementById('newPassword');
    const passwordStrength = document.getElementById('passwordStrength');
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');

    newPasswordInput.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;

        // 显示密码强度提示
        passwordStrength.classList.remove('hidden');

        // 密码长度检测
        if (password.length >= 8) strength += 25;
        if (password.length >= 12) strength += 25;

        // 包含数字检测
        if (/[0-9]/.test(password)) strength += 25;

        // 包含大写字母检测
        if (/[A-Z]/.test(password)) strength += 15;

        // 包含小写字母检测
        if (/[a-z]/.test(password)) strength += 15;

        // 包含特殊字符检测
        if (/[^A-Za-z0-9]/.test(password)) strength += 15;

        // 限制最大值为100
        strength = Math.min(strength, 100);

        // 更新强度条和文本
        strengthBar.style.width = `${strength}%`;

        if (strength < 25) {
            strengthBar.className = 'bg-red-500 h-2.5 rounded-full';
            strengthText.textContent = '非常弱 - 请使用更复杂的密码';
        } else if (strength < 50) {
            strengthBar.className = 'bg-orange-500 h-2.5 rounded-full';
            strengthText.textContent = '弱 - 建议添加更多字符';
        } else if (strength < 75) {
            strengthBar.className = 'bg-yellow-500 h-2.5 rounded-full';
            strengthText.textContent = '中等 - 可以更安全';
        } else if (strength < 100) {
            strengthBar.className = 'bg-green-500 h-2.5 rounded-full';
            strengthText.textContent = '强 - 很好的密码';
        } else {
            strengthBar.className = 'bg-blue-500 h-2.5 rounded-full';
            strengthText.textContent = '非常强 - 安全的密码';
        }
    });

    // 添加页面加载动画
    document.addEventListener('DOMContentLoaded', function() {
        const loginContainer = document.querySelector('.login-container');
        loginContainer.classList.add('opacity-0', 'translate-y-4');
        setTimeout(() => {
            loginContainer.classList.remove('opacity-0', 'translate-y-4');
            loginContainer.classList.add('transition-all', 'duration-500');
        }, 100);
    });

    // 表单提交前验证
    document.querySelector('form').addEventListener('submit', function(e) {
        const username = usernameInput.value.trim();
        const oldPassword = oldPasswordInput.value.trim();
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        // 验证账号和原密码
        if (!username || !oldPassword) {
            e.preventDefault();
            showError('请输入管理员账号和原密码');
            return;
        }

        // 验证密码长度
        if (newPassword.length < 8) {
            e.preventDefault();
            showError('新密码长度至少需要8个字符');
            return;
        }

        // 验证密码一致性
        if (newPassword !== confirmPassword) {
            e.preventDefault();
            showError('两次输入的新密码不一致，请重新输入');
            return;
        }

        // 禁用按钮防止重复提交
        resetPasswordBtn.disabled = true;
        resetPasswordBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i><span>处理中...</span>';
    });

    // 显示错误提示
    function showError(message) {
        const form = document.querySelector('form');
        const errorDiv = document.createElement('div');
        errorDiv.className = 'alert alert-error mt-2 p-3 bg-red-50 border border-red-200 rounded-lg';
        errorDiv.innerHTML = '<i class="fa fa-exclamation-circle mr-2 text-red-500"></i><span>' + message + '</span>';
        form.insertBefore(errorDiv, form.firstChild);

        // 3秒后自动移除错误提示
        setTimeout(() => {
            errorDiv.remove();
        }, 3000);
    }
</script>
</body>
</html>